<template>
<div class="vm-message-page">
  <vm-common-header
    :pageTitle="pageTitle"
    :goBack="goBack"></vm-common-header>
  <tab bar-active-color="#fe0100" active-color="#da261b" default-color="#666666" >
    <tab-item selected @on-item-click="onItemClick">
      <i class="vm-icon notice"></i>
      通知
    </tab-item>
    <tab-item @on-item-click="onItemClick">
      <i class="vm-icon announcement"></i>
      公告
    </tab-item>
  </tab>
  <div class="vm-message-warpper" ref="warpper">
    <div class="content">
      <div class="vm-messgae-notice" v-if="toggleIndex == 0">
        <vm-common-noData></vm-common-noData>
        <div class="vm-message-item" v-for="(item, key) in this.messageData" :key="key" v-if="item.noticeDetails">
          <div class="vm-message-item-content">
            <div class="vm-message-item-h">
              <h1>报价通知</h1>
              <span>2018-08-20 15:24:38</span>
            </div>
            <div class="vm-message-item-b">
              <p>达到爱情的群无恶趣味asd按我发的文反倒是个儿童观电饭锅电商服务二位dfg地方个人羊肉汤一份改变风格和让他</p>
            </div>
          </div>
          <div class="vm-message-item-f">
            <span>查看详情</span>
            <x-icon type="ios-arrow-forward" size="18" icon-success-color="red"></x-icon>
          </div>
        </div>
        <!--<div class="vm-message-item">-->
          <!--<div class="vm-message-item-content">-->
            <!--<div class="vm-message-item-h">-->
              <!--<h1>站内信</h1>-->
              <!--<span>2018-08-20 15:24:38</span>-->
            <!--</div>-->
            <!--<div class="vm-message-item-b">-->
              <!--<p>发件人：实时</p>-->
              <!--<p>信息：达到爱情的群无恶趣味asd按我发的文反倒是个儿童观电饭锅电商服务二位dfg地方个人羊肉汤一份改变风格和让他</p>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="vm-message-item-f">-->
            <!--<span>查看详情</span>-->
            <!--<x-icon type="ios-arrow-forward" size="18" icon-success-color="red"></x-icon>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <div class="vm-message-announcement" v-if="toggleIndex == 1">
        <router-link :to="`/common_details/${item.id}/新闻详情`" tag="div" class="vm-message-item" v-for="(item, key) in newslistData" :key="key">
          <div class="vm-message-item-content">
            <div class="vm-message-item-h">
              <h1>{{ item.noticeTitle }}</h1>
              <span>{{ item.createTime }}</span>
            </div>
            <div class="vm-message-item-b">
              <p style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;" v-html="item.noticeContent"></p>
            </div>
          </div>
          <div class="vm-message-item-f">
            <span>查看详情</span>
            <x-icon type="ios-arrow-forward" size="18" icon-success-color="red"></x-icon>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import { Tab, TabItem } from 'vux'
import BScroll from 'better-scroll'
import { systemList, newlist } from '@/api/message.js'
export default {
  data () {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      toggleIndex: 0,
      messageData: new Array(),
      newslistData: new Array()
    }
  },
  created () {
    this.getMessageData();
  },
  mounted () {
    this.$nextTick(() => {
      if ( !this.scroll ) {
        this.scroll = new BScroll(this.$refs.warpper,{
          click: true,   //是否派发click事件
          scrollbar: false
        });
      } else {
        this.scroll.refresh()
      }
    })
  },
  methods: {
    // 获取通知数据
    getMessageData () {
      systemList().then(res => {
        this.messageData = res.data.data;
        this.messageData.map(item => {
          switch (item.btype) {
            case '需求计划管理':
            case '采购计划管理':
            case '采购方案管理':
            case '合同审批':
            case '到货审批':
            case '待检审批':
            case '质检审批':
            case '退货审批':
            case '仓库盘点审批':
            case '仓库调拨审批':
            case '入库审批':
            case '出库审批':
            case '询价审批':
              item.commonDetails = true;
              break;
            case '项目管理':
              break;
            case '邀请报价':
            case '已中标':
            case '发布公示':
              // item.noticeDetails = true;
              break;
          }
        })
      });
    },
    async onItemClick (index) {
      this.toggleIndex = index;
      this.$nextTick (() => {
        this.scroll.refresh();
      });
    },
    newlistData () {
      newlist().then(res => {
        this.newslistData = res.data.data;
        console.log(this.newslistData);
      })
    }
  },
  components: {
    'vm-common-header': vmCommonHeader,
    Tab,
    TabItem
  },
  watch: {
    toggleIndex (newV) {
      if (newV == 1) {
        this.newlistData();
      }
    }
  }

}
</script>

<style lang="scss">
.vm-message-page {
  .vux-tab-wrap {
    z-index: 999;
    padding-top: 80px !important;
    .vux-tab-container {
      height: 80px !important;
      .vux-tab {
        height: 80px !important;
        .vux-tab-item {
          i.vm-icon.notice {
            display: inline-block;
            width: 34px;
            height: 34px;
            margin-right: 10px;
            background-position: -86px -287px;
          }
          i.vm-icon.announcement {
            margin-right: 10px;
            width: 31px;
            height: 34px;
            display: inline-block;
            background-position: -87px -251px;
          }
          display: flex;
          justify-content: center;
          align-items: center;
          color: #666666;
          font-size: 30px;
        }
        .vux-tab-item.vux-tab-selected {
          i.vm-icon.notice {
            display: inline-block;
            width: 34px;
            height: 34px;
            background-position: -86px -323px;
          }
          i.vm-icon.announcement {
            width: 31px;
            height: 34px;
            display: inline-block;
            background-position: -88px -215px;
          }
        }
      }
    }
  }
  .vm-message-warpper {
    background-color: #f4f4f4;
    padding: 0 40px;
    margin-top: 30px;
    height: calc( 100% - 135px );
    .vm-message-item {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      margin-bottom: 30px;
      -webkit-border-radius: 20px; /* no */
      -moz-border-radius: 20px;/* no */
      border-radius: 20px;/* no */
      box-shadow: 0 5px 15px #dadada; /* no */
      .vm-message-item-hb {
        height: 50px;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ff6765;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        & > p {
          color: #fff;
          padding-left: 60px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;/*加宽度width属来兼容部分浏览*/
        }
      }
      .vm-message-item-content {
        padding: 0 40px 0 30px;
        .vm-message-item-h {
          display: flex;
          padding-top: 30px;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 25px;
          span {
            min-width: 130px;
            text-align: right;
            font-size: 20px;
          }
          h1 {
            line-height: 30px;
            flex: 1;
            text-align: left;
            font-size: 30px;
          }
        }
        .vm-message-item-b {
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          text-align: left;
          padding-bottom: 25px;
          border-bottom: 1px solid #eeeeee; /* no */
          p {
            color: #666666;
            font-size: 24px;
            line-height: 50px;
          }
        }
      }
      .vm-message-item-f {
        padding: 0 40px 0 30px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #999999;
          font-size: 22px;
        }
      }

    }
  }
}
.vm-message-announcement {
  .vm-message-item-h {
    &::before {
      content: '';
      background: url('../../../static/images/mv_Spirit.png') no-repeat;
      background-size:881px 1149px;
      background-position: -91px -359px;
      width: 35px;
      height: 35px;
      display: inline-block;
      margin-right: 10px;
    }
    & > h1 {
      display: flex;
      align-items: center;
    }
  }
}
</style>
